<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>网页的简单布局</title>
    <style>
        /* 提取网页的公共样式 */
        /* header,main,footer{
            width:1000px;
            margin:0 auto;
        } */

        /* 设置网页头部 */
        header{
            width:1000px;
            height:150px;
            background-color: silver;
            margin:0 auto;
        }
        /* 设置网页主体 */
        main{
            width:1000px;
            height:500px;
            background-color: #bfa;
            margin:10px auto;
        }
        /* 设置网页主体的左侧导航条 */
        nav{
            width:200px;
            height:100%;
            background-color: antiquewhite;
            float:left;
        }
        /* 设置网页主体的中间内容 */
        article{
            width:580px;
            height:100%;
            background-color:red ;
            /* 使左右两边有距离 */
            margin:0 10px;
            
            float:left;
        }
        /* 设置网页主体的右侧内容 */
        aside{
            width:200px;
            height:100%;
            background-color:pink;
            float:left;
        }
        /* 设置网页底部 */
        footer{
            width:1000px;
            height:150px;
            background-color: tomato;
            margin:0 auto;

        }
    </style>
</head>
<body>
    <!-- 创建网页头部 -->
    <header></header>
    <!-- 创建网页主体 -->
    <main>

        <!-- 左侧导航 -->
        <nav>

        </nav>

        <!-- 中间内容 -->
        <article>

        </article>

        <!-- 右侧边栏 -->
        <aside>

        </aside>

    </main>
    <!-- 网页底部 -->
    <footer></footer>
    
</body>
</html>